<template>
    <div class="container_goods">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片 -->
    <el-card>
        <!-- 添加分类按钮 -->
        <el-row>
        <el-col>
            <el-button @click="showCateDialog" type="primary">添加分类</el-button>
        </el-col>
        </el-row>

        <!-- 分类列表 -->
        <tree-grid ref="table" index-text="#" :data="treeData" :columns="columns" :border="true" :show-index="true" :selection-type="false"
        :expand-type="false">

        <template slot="isok" slot-scope="scope">

            <i class="el-icon-circle-close" v-if="scope.row.cat_deleted" style="color: red;"></i>
            <i class="el-icon-circle-check" v-else style="color: #009961;"></i>

        </template>

        <template slot="btns" slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditCateDialog(scope)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCate(scope)">删除</el-button>
        </template>
        </tree-grid>

        <!-- 分页 -->
        <el-pagination @current-change="handleCurrentChange" :current-page.sync="pagenum" :page-size="pagesize" layout="total, prev, pager, next"
        :total="total">
        </el-pagination>
    </el-card>

    <!-- 添加分类的对话框 -->
    <el-dialog width="40%" @close="resetAddCateForm" title="添加分类" :visible.sync="addCateDialogVisible">

        <!-- 表单 -->
        <el-form :model="addCateRuleForm" :rules="addCateRules" ref="addRuleFormRef" label-width="100px" class="demo-ruleForm">

        <!-- 每一项 -->
        <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="addCateRuleForm.cat_name"></el-input>
        </el-form-item>

        <!-- 每一项 -->
        <el-form-item label="父级分类">
            <el-cascader style="width: 100%" expand-trigger="hover" :options="selectedOptions2" :props="addCateitemOption" v-model="selectedOptions1">
            </el-cascader>
        </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog
    title="编辑分类"
    :visible.sync="editDialogVisible"
    width="30%">

    <el-form ref="editForm" :model="editRuleForm">
        <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="editRuleForm.cat_name"></el-input>
        </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editCate">确 定</el-button>
    </span>
    </el-dialog>

    </div>
</template>

<script>
// 导入外部js代码
import mix from './categories-mixins.js'
export default {
  mixins: [mix]
}
</script>

<style lang="less" scoped>
.el-button {
    margin: 10px 0;
}
</style>
